<template>
  <div class="detail">
    <Header :text="text"/>
    <div class="detail-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="$t('cTransportSearch.track')" name="1">
          <el-timeline :reverse="false">
            <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :color="activity.color"
                :timestamp="activity.timestamp">
              {{$t(activity.content)}}
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
        <el-collapse-item :title="$t('cTransportSearch.stowage')" name="2">
          <div class="vehicleDetail">
            <div>
              <span><span class="weight">{{$t('cTransportSearch.inquiry')}}: </span>{{searchObj.inquiryNum}}</span>
              <span><span class="weight">{{$t('cTransportSearch.documentNum')}}: </span>{{searchObj.documentNum}}</span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.carNum')}}:</span> <span v-if="searchObj.innerCarInfoEntity">{{searchObj.innerCarInfoEntity.carNum}}</span></span>
              <span><span class="weight">{{$t('cTransportSearch.carType')}}:</span> <span v-if="searchObj.innerCarInfoEntity">{{searchObj.innerCarInfoEntity.actCarType}}</span></span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.driverName')}}: </span><span v-if="searchObj.innerTransportEntity">{{searchObj.innerTransportEntity.driverName}}</span></span>
              <span><span class="weight">{{$t('cTransportSearch.driverPhone')}}: </span><span v-if="searchObj.innerTransportEntity">{{searchObj.innerTransportEntity.driverPhone}}</span></span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.provinceNum')}}:</span> <span v-if="searchObj.innerTransportEntity">{{searchObj.innerTransportEntity.provinceNum}}</span></span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.distance')}}:</span> <span v-if="searchObj.innerTransportEntity">{{searchObj.innerTransportEntity.distance}}</span></span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.actualSendcarsDate')}}:</span> <span v-if="searchObj.innerTransportEntity && searchObj.innerTransportEntity.actualSendcarsDate">{{searchObj.innerTransportEntity.actualSendcarsDate.substring(0,16)}}</span></span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.arriveDate')}}:</span> <span v-if="searchObj.innerTransportEntity && searchObj.innerTransportEntity.estimateArriveDate">{{searchObj.innerTransportEntity.estimateArriveDate.substring(0,16)}}</span></span>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item :title="$t('cTransportSearch.carInfo')" name="3">
          <div class="vehicleDetail">
            <div>
              <span><span class="weight">{{$t('cTransportSearch.deliveryUnit')}}:</span>{{searchObj.deliveryUnit}}</span>
              <span><span class="weight">{{$t('cTransportSearch.startStation')}}:</span>{{searchObj.startStation}}</span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.targetStation')}}:</span> {{searchObj.targetStation}}</span>
              <span>
                <span class="weight">{{$t('cTransportSearch.deliveryPeople')}}:</span>
                <span>{{searchObj.deliveryPeople}}</span>
              </span>
            </div>
            <div>
              <span class="flexText">
                <span class="weight">
                  {{$t('cTransportSearch.deliveryPhone')}}:
                </span>
                <span>{{searchObj.deliveryPhone}}
                  <span v-if="searchObj.senderPhone"> | {{searchObj.senderPhone}}</span>
                </span>
              </span>
            </div>
            <div>
              <span class="flexText">
                <span class="weight">{{$t('cTransportSearch.receiveUnit')}}: </span>
                <span>{{searchObj.receiveUnit}}</span>
              </span>
              <span class="flexText">
                <span class="weight">{{$t('cTransportSearch.receivePeople')}}: </span>
                <span>{{searchObj.receivePeople}}</span>
              </span>
            </div>
            <div>
              <span><span class="weight">{{$t('cTransportSearch.receivePhone')}}: </span>{{searchObj.receivePhone}} <span v-if="searchObj.sparePhone">| {{searchObj.sparePhone}}</span></span>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item :title="$t('cTransportSearch.itemInfo')" name="4">
          <div class="box" v-if="searchObj.innerGoodsInfoEntityList && searchObj.innerGoodsInfoEntityList.length !== 0">
            <div class="box-content" v-for="item in searchObj.innerGoodsInfoEntityList" :key="item.id">
              <div class="box-content-text">
                <span>{{$t('cArroval.aog')}}: <span style="color:red" v-if="item.aog === 1">AOG</span><span v-else>{{$t('cArroval.noAog')}}</span></span>
                <span>{{$t('cTransportSearch.addTime')}}: {{item.addTime.substring(0,11)}}</span>
              </div>
              <div class="box-content-text">
                <span class="contraName">{{$t('cTransportSearch.itemName')}}: {{item.itemName}}</span>
                <span>{{$t('cTransportSearch.danger')}}: <span v-if="item.danger === 1">{{$t('m.yes')}}</span><span v-else>{{$t('m.no')}}</span></span>
              </div>
              <div class="box-content-text">
                <span>{{$t('cTransportSearch.partNum')}}: {{item.partNum}}</span>
                <span>{{$t('cTransportSearch.serialNum')}}: {{item.serialNum}}</span>
              </div>
              <div class="box-content-text">
                <span>{{$t('cTransportSearch.number')}}: {{item.number}}</span>
                <span>{{$t('cTransportSearch.size')}}: <span v-if="item.itemLength">{{item.itemLength}} * {{item.itemWidth}} * {{item.itemHeight}}{{item.measurement}}</span></span>
              </div>
              <div class="box-content-text">
                <span>{{$t('cTransportSearch.itemWeight')}}: {{item.itemWeight}}{{item.weightUofm}}</span>
                <span>{{$t('cTransportSearch.packingType')}}: {{$t(item.packingType)}}</span>
              </div>
            </div>
          </div>
          <div>
            <div class="file-text">{{$t('cTransportSearch.files')}}</div>
            <div v-for="item in plainOptions" :key="item.value">
              <div v-if="arr.length && arr.indexOf(item.value) > -1" class="text">
                <a href="#" style="color: #409eff">{{item.name}}</a>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <van-image-preview
        v-model="isShowPreview"
        :images="previewImages"
        :startPosition="index"
        :loop="true"
      />
    </div>
  </div>
</template>

<script>
import Header from "@/components/common/Header"
import {fileName, transformArrayBufferToBase64} from "@/assets/js/common"
import { $export } from "@/api/export"
import { ImagePreview } from 'vant'
import {$approval} from "@/api/approval";
export default {
  // 变量
  data() {
    return {
      text: '',
      activeName: 'first',
      activeNames: ['1','2','3','4'],
      activities: [
        {
          content: 'cTransportSearch.arrived',
          timestamp: ''
        },
        {
          content: 'cTransportSearch.departure',
          timestamp: ''
        },
        {
          content: 'cTransportSearch.allocate',
          timestamp: ''
        },
        {
          content: 'cTransportSearch.carGo',
          timestamp: ''
        }
      ],
      searchObj: {},
      previewImages: [],
      isShowPreview: false,
      imgOk: [], // 已加载的图片
      index: 0,
      plainOptions: Object.freeze(fileName),
      arr: [] // 随附附件
    }
  },
  // 使用其他组件
  components: {
    Header,
    ImagePreview
  },
  // 方法
  methods: {
    handleClick() {},
    // 状态跟踪
    handleTracking() {
      // 已派车 已提货 已到达 已签收
      this.activities.map(item => {
        if(item.content === 'cTransportSearch.carGo') {
          item.timestamp = this.searchObj.innerTransportEntity ? this.searchObj.innerTransportEntity.actualSendcarsDate : ''
        }
        if(item.content === 'cTransportSearch.allocate') {
          item.timestamp = this.searchObj.innerTransportEntity ? this.searchObj.innerTransportEntity.startDate : ''
        }
        if(item.content === 'cTransportSearch.departure') {
          item.timestamp = this.searchObj.innerTransportEntity ? this.searchObj.innerTransportEntity.actualArriveDate : ''
        }
        if(item.content === 'cTransportSearch.arrived') {
          item.timestamp = this.searchObj.innerTransportEntity ? this.searchObj.innerTransportEntity.signDate : ''
        }
      })
      this.activities.map(item => {
        if(item.timestamp) return item.color = '#0bbd87'
      })
    },
    // 文件预览下载
    handleDown(item) {
      const obj = { fileId: item.id, fileType: item.fileType }
      $export
       .downFile(obj)
       .then(res => {
         let _this = this
         if (res.type == 'application/json') {
            const reader = new FileReader()
            reader.onload = function() {
              const { msg } = JSON.parse(reader.result) //此处的msg就是后端返回的msg内容
              _this.$msg.fail(msg)
            }
            reader.readAsText(res)
          }
          else {
            this.previewImages = []
            var code = 'data:image/jpeg;base64,'+ transformArrayBufferToBase64(res)
            this.previewImages.push(code)
            this.index = this.previewImages.length - 1
            this.isShowPreview = true
          }
       })
       .catch(err => this.$msg.fail(res.msg))
    }
  },
  // 生命周期函数
  created() {
    this.text = this.$route.query.type
    this.searchObj = JSON.parse(sessionStorage.getItem('searchObj'))
    if (this.searchObj.documentsAttached) {
      this.arr = this.searchObj.documentsAttached.split(',')
    }
    this.handleTracking()
    console.log(this.searchObj)
  }
}
</script>

<style scoped>
/* 修改tab */
.detail-content {
  position: relative;
  top: 18.333vw;
  left: 0;
  padding: 0 10px;
}
/deep/.van-popup--left {
  left: 0
}
/deep/#tab-second {
  padding: 0 11.111vw;
}
/deep/#tab-first {
  padding: 0 11.111vw;
}
/deep/.el-collapse {
  border-top: 0;
}
.first {
  padding: 0 2.778vw;
}
/deep/.el-collapse-item__header {
  font-size: 5vw !important;
  font-weight: bold;
}
/deep/.el-tabs__header {
  position: fixed;
  top: 19.333vw;
  z-index: 99;
  width: 100%;
  background-color: white;
}
/deep/.el-collapse-item__content {
  font-size: 3.889vw !important;
}
/deep/.el-collapse-item__content {
  padding-bottom: 0;
}
/* ------- */
/* 状态跟踪 */
/deep/.el-timeline {
  padding-left: 15px;
}
/* 配载信息 */
.vehicleDetail div {
  display: flex;
}
.vehicleDetail div span {
  flex: 1;
}
/* 货物信息 */
.box {
  padding: 0 2.778vw;
  border: 1px solid #797979;
  border-radius: 5px;
}
.box-content {
  padding: 2.778vw 0;
  border-bottom: 0.278vw dashed #797979;
}
.box-content:last-child {
  border-bottom: 0;
}
.box-content-text {
  display: flex;
}
.box-content-text span {
  flex: 1;
}
.contraName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-text {
  font-size: 4.611vw;
  font-weight: bold;
}
.file div {
  padding: 5px 0;
}
</style>
